<template>
	<view class="modal">
		<view class="modal_bg">
			<image class="logo" src="/static/logo.png"></image>
			<view class="modal_title">{{title}}</view>
			<view class="modal_content">
				<image class="upload" :src="file" mode="aspectFill" @click="chooseImage"></image>
				<image class="alert" src="/static/icon-alert.png" mode="aspectFill"></image>
				<text class="alert-text">{{alert_text}}</text>
				<textarea name="" id="" cols="30" rows="10" :placeholder="placeholder" v-model="log"></textarea>
			</view>
			<view class="modal_btn">
				<button @click="cancel" class="cancelBtn">取消</button>
				<button @click="save" class="okBtn">确定</button>
			</view>

		</view>

	</view>

</template>

<script>
import { checkIn } from '../api'
import { config } from '../utils/utils'

	const defaultFile = '/static/upload-default.png';
	
	export default {
		name: "updateInfo",
		props: {
			type: Number,
			default: 0
		},
		data() {
			return {
				file: defaultFile,
				log: '',
				title: '发布信息',
				alert_text: '发布信息',
				placeholder: '填写',	
			}
		},
		watch:{
				type: { 
						handler(value) {
							  console.log('userInfo===',value)
								this.file = defaultFile;
								this.log = '';
								
								switch(value) {
								         case 0: 
								          {
								           this.title = '超慢跑记录上传';
								           this.alert_text = '请上传超慢跑打卡图片或运动数据';
								           this.placeholder = '请上传超慢跑打卡图片或运动数据';
								          }
								         break;
								         case 4:
								          {
								           this.title = '自我训练记录上传';
								           this.alert_text = '请上传运动记录图，如：运动数据、运动打卡等';
								           this.placeholder = '请上传运动记录图，如：运动数据、运动打卡等';
								          }
								         break;
								         case 6:
								          {
								           this.title = '大师课阅听记录';
								           this.alert_text = '上传大师课播放历史或收听页面截屏';
								           this.placeholder = '可在此笔记阅听进度';
								          }
								         break;
								         case 9:
								          {
								           this.title = '留言反馈';
								           this.alert_text = '留言反馈';
								           this.placeholder = '请描述问题或填写反馈内容';
								          }
								         break;
								         default: 
								         {
								          this.title = '发布信息';
								          this.alert_text = '发布信息';
								          this.placeholder = '填写';
								         }
								         break;
								     
								        }
						}, 
						immediate: true,//设置为 true 时，第一次进入页面时即监听
						deep: true ,// 深度监听父组件传过来对象变化 
				}
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			save() {
				
				if(this.file == defaultFile) {
					uni.showToast({
						title: '请选择图片',
						icon: 'none'
					})
					return;
				}
				if(!this.log) {
					uni.showToast({
						title: '请填写内容',
						icon: 'none'
					})
					return;
				}
				/**
				 * 用户自我打卡
				 * openId 用户openId
				 * content 打卡内容
				 * imgUrl 打卡图片
				*/
			  let userInfo = uni.getStorageSync(config.userInfo);
			  let openId = userInfo.openid;
				let param = {
					type: this.type,
					openId: openId,
					content: this.log,
					imgUrl: this.file
				}
				console.log("param===",param)
				checkIn(param).then(res=>{
					uni.showToast({
						title:res.msg
					})
					this.$emit('close')
				})
			},
			chooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						console.log(res.tempFilePaths);
						// 根据需要进行后续处理，例如上传图片等
						uni.uploadFile({
							url:'https://trip.chinahood.net/api/Upfiles/pic', // 后台上传接口
							filePath: res.tempFilePaths[0], // 上传图片 url
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data',
								// 'Authorization':uni.getStorageSync('token')
							},
							success(res) {
								let data = JSON.parse(res.data);
								that.file = decodeURI(data.url);
							}
						});
					},
					fail: (err) => {
						// 处理错误情况
						console.log('选择图片失败', err);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.modal {
		.modal_bg {
			// background: white;
			border-radius: 20rpx;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			.close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
			.modal_title {
				width: 100%;
				border-bottom: 2rpx solid #eff1f4;
				font-size: 36rpx;
			}

			.modal_content {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-bottom: 2rpx solid #eff1f4;
				padding: 0 40rpx;
				
				.upload {
					width: 160rpx;
					height: 160rpx;
					margin-top: 70rpx;
				}
				.alert {
					margin-top: 30rpx;
					width: 54rpx;
					height: 54rpx;
				}
				.alert-text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
					
				}
				textarea {
					margin-top: 40rpx;
					border:  1px solid #000000;
					height: 240rpx;
					width: 590rpx;
					border-radius: 10rpx;
					text-align: left;
					padding: 30rpx;
					font-size: 24rpx;
				}
				
			}

			.modal_btn {
				margin-top: 130rpx;
				height: 80rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.cancelBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: #f8f8f8;
					color: rgb(6, 193, 96);
					border-radius: 10rpx;
					width: 240rpx;
					height: 80rpx;
					font-size: 34rpx;
					margin: 0;
					padding: 0;
				}
				.okBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgb(6, 193, 96);
					color: #ffffff;
					border-radius: 10rpx;
					width: 240rpx;
					height: 80rpx;
					font-size: 34rpx;
					margin: 0;
					padding: 0;
					margin-left: 30rpx;
				
				}
		
			}
		}
	}
</style>

